<template>
    <div class="head" v-if="exam_is_over">
        <div class="tab_size" style="display:flex;">
            <div style="width: 111px;text-align: center;cursor: pointer;" @click="tabType = 1">
                <p :style="tabType == 1 ? 'color:#67C23A;':'color:#FFF;' ">
                    本期考试
                </p>
            </div>
            <div style="width: 111px;text-align: center;cursor: pointer;" @click="tabType = 2">
                <p :style="tabType == 2 ? 'color:#67C23A;':'color:#FFF;' ">
                    我的补考
                </p>
            </div>
            <div style="width: 111px;text-align: center;cursor: pointer;" @click="tabType = 3">
                <p :style="tabType == 3 ? 'color:#67C23A;':'color:#FFF;' ">
                    考试记录
                </p>
            </div>
        </div>
        <div v-if="tabType == 1 || tabType == 2">
            <div v-if="TestPaperContentSHOW">
                <div style="display: flex; justify-content: space-around;">
                    <div style="width: 66%;height: 589px;box-shadow: 0px 4px 6px 0px rgba(43,174,255,0.1); border-radius: 12px 12px 12px 12px; overflow: hidden;">
                        <div v-for="(item,index) in TestPaperContent" :key="index" style="display: flex; ">
                            <div v-if="item.SHOW">
                                <div style="display: flex; justify-content: center; align-items: center;">
                                    <div>
                                        <h3 style="display: flex;color: #C4D9FC; font-size: 45px; margin: 2% 2%;">
                                            考试题目：
                                            <p>第{{ index+1 }}题</p>
                                            <p>{{item.tyopesize}}</p>
                                        </h3>
                                        <h2 style="width: 100%; font-weight: bold; font-size: 20px; padding: 23px; display: flex; justify-content: center; margin-top: 24px;">{{index+1}}:&nbsp; {{ item.q_title }}</h2>
                                    </div>
                                </div>
                                <div style="padding-left: 31px; ">
                                    <div v-for="(val,Two) in item.answers" :key="Two" >
                                        <el-checkbox v-if='item.many' v-model="item.user_answer" :value="val.a_id" :label="val.a_item" size="large" style="margin:10px 10px; white-space: normal; font-size: 18px;"/>
                                        <el-radio-group v-model="item.user_answer" class="ml-4" v-if='item.Choice'>
                                            <div>
                                                <el-radio :value="val.a_id" size="large">
                                                    <p style="font-size: 21px;"> {{val.a_item}} </p>
                                                </el-radio>
                                            </div>
                                        </el-radio-group>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex; justify-content: center; margin-top: 20px;">
                            <el-button type="primary" @click="NextquestionOne()">上一题</el-button>
                            <el-button type="primary" @click="Nextquestion()">下一题</el-button>
                            <el-button type="success" @click="Submitanswers()">提交试卷</el-button>
                        </div>
                    </div>
                    <div style="width:calc(100% - 70%); box-shadow: 0px 4px 6px 0px rgba(43,174,255,0.1); border-radius: 12px 12px 12px 12px; ">
                        <p style="font-weight: 400;
                            font-size: 22px;
                            color: #333333; line-height: 20px;text-align: left;font-style: normal; text-transform: none; margin: 10px 0px;">共计{{ TestPaperContent.length }}道题</p>
                        <div class="right-top">
                            <!-- item.Currently ? 'Currently':'CurrentlyTwo' -->
                            <div v-for="(item,index) in TestPaperContent" :class="switchtopicT(item,index)" style="cursor: pointer;" @click="switchtopic(item,index)">{{ index+1 }} </div>
                        </div>
                        <div style="margin-top: 50px;display: flex; justify-content: center; align-items: center;">
                            <p>剩余时间：</p>
                            <p style="font-family: PingFang SC, PingFang SC;
                                font-weight: 400;
                                font-size: 54px;
                                color: #FF9421;">{{ Datme }}</p>
                        </div>
                        <div style="margin-top: 100px; padding-left: 30%;">
                            <div style="font-weight: 400;font-size: 22px;color: #333333; line-height: 20px;text-align: center; font-style: normal; display: flex;justify-content: flex-start;">
                                <p>姓名：</p>
                                <p style="width: 100px;">{{ this.$store.state.userInfor.name }}</p>
                            </div>
                            <div style="font-weight: 400;font-size: 22px;color: #333333; line-height: 20px;text-align: center; font-style: normal; display: flex;justify-content: flex-start; margin-top: 20px;padding-bottom: 26px;">
                                <p>班级：</p>
                                <p >{{ $store.state.userInfor.className }}</p>
                            </div>
                        </div>
                    </div>
                </div>
               
            </div>
            <div v-else style="width:100%; height:100%;">
                <div style="width: 100%; height:100%; background: #F6F9FF;display: flex; align-items: center;justify-content: center;">
                    <div class="nothingData">
                        <p>开始考试</p>
                        <div>
                            <p style="color:#333333; font-size: 22px;">姓名: {{userDataINfor.u_name}}</p>
                            <p style="color:#333333; font-size: 22px;">培训期: {{ userDataINfor.c_name }}</p>
                            <p style="color:#333333; font-size: 22px;">考试时间: {{ Datme }} 分钟</p>
                        </div>
                        <div style="display:flex; justify-content: center;">
                            <el-button type="success" @click="nextKao(),enterFullScreen()">开始考试</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else>
            <NG_history></NG_history>
        </div>
    </div>
    <div v-if="finish" class="finish">
        <div style='width: 300px; height: 100px; background-color: #FFF; border-radius: 16px;'>
            <div style='width: 100%; display: flex; justify-content: center; margin-top: 20px;'>
                <p>请提交试卷</p>
            </div>
            <div style='width: 100%; display: flex; justify-content: center;'>
                <el-button type="success" @click="Submitanswers()">提交试卷</el-button>
            </div>
        </div>
    </div>
    <div v-show="SHOWASD"  class="head">
        <div class="head_content">
            <div class="head_Submit">
                <p class="Submitprompt">姓名:&nbsp;&nbsp;{{ userDataINfor.u_name }}</p>
                <p class="Submitprompt">试卷:&nbsp;&nbsp;{{ userDataINfor.c_name }}</p>
                <p class="Submitprompt">考试成绩:&nbsp;&nbsp; {{ chengji }}</p>
            </div>
        </div>
        <!-- <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
        /> -->
    </div>
</template>
<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import history from './history.vue';
export default {
   components: {
    'NG_history':history
   },
    data() {
        return {
            Disrupttopic:[],
            Examdata:false,
            Select:'',
            testpaper: this.$store.state.testpaper,
            TestPaperContent:[],
            TestPaperContentSHOW:false,
            current:-1,      // 当前题目
            Datme: 0,
            rightkey:[],
            Eachtrack:[],
            Eachtr:'',
            checkedCities:[],
            eid:'',
            tabType:1,
            Makeupexam:false,
            SHOW_bukao:false,
            exam_is_over: true,   // 是否考试结束
            TimeEnd:'',
            StartTime:'',
            userDataINfor:"",
            chengji:'',
            finish: false,
            SHOWASD:false,
        };
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
      // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.userDataINfor = JSON.parse(sessionStorage.getItem('info'))
        this.get('/class/detail?c_id='+this.$store.state.userInfor.c_id).then(res=>{
            this.$store.state.userInfor.className = res.data.c_name
        })
        this.get('/re_exam/?u_id='+JSON.parse(sessionStorage.getItem('info')).u_id).then(res=>{
            if(res.code == 200){
                this.SHOW_bukao = true
                this.Makeupexam = true
                this.$store.state.userInfor.className = res.data.c_name
                this.get('/re_exam/detail?u_id='+JSON.parse(sessionStorage.getItem('info')).u_id+'&e_id='+res.data.e_id).then(res=>{
                    if(res.code == 200){
                        this.examinationData(res)
                    }else{
                        this.$message({
                            message: res.data,
                            type: 'error',
                        })
                    }
                })
            }else{
                this.Makeupexam = false
                this.SHOW_bukao = false
            }
        })
        this.get('/exam/?c_id='+this.$store.state.userInfor.c_id).then(res=>{
            if(res.code == 200){
                this.TimeEnd = res.data. e_duration_date
                this.StartTime = res.data.e_start_date
                this.Makeupexam = true
                this.Datme = res.data.time
                this.get('/exam/detail?e_id='+res.data.e_id ).then(data=>{
                    if(data.code == 200){
                        this.examinationData(data)
                    }else{
                        this.$message({
                            message: '暂无考试',
                            type: 'error',
                        })
                    }
                })
            }
        })
    },
    // 方法集合
    methods: {
        switchtopicT(val,index) {
            if(val.user_answer.length == 0){
                return 'CurrentlyTwo'
            }else{
                return 'Currently'
            }
        },
        switchtopic(val,index) {
            this.TestPaperContent.forEach((item,index) =>{
                item.SHOW = false
            })
            this.current = index
            this.TestPaperContent[index].SHOW = true
            this.TestPaperContent[index].Currently = true
            let indexTopic = index
            indexTopic += 1
            this.$message({
                message: '切换到第'+indexTopic+'题',
                type: 'success',
            })
        },
        nextKao() {
            // 每分钟执行一次
            if(this.TestPaperContent.length != 0){
                let intervalId = setInterval(() => {
                    if(this.Datme == 0){
                        clearInterval(intervalId);
                    }else{
                        this.Datme--;
                    }
                    if(this.Datme == 0){
                        this.finish = true
                    }
                }, 60000);
                this.$store.state.startmination = false
                this.TestPaperContentSHOW = true
            }
        },
        enterFullScreen() {
            let element = document.documentElement;
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) { /* Firefox */
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) { /* IE/Edge */
                element.msRequestFullscreen();
            }
        },
        NextquestionOne() {
            this.current -= 1
            this.TestPaperContent.forEach((item,index) =>{
                item.SHOW = false
            })
            if(this.TestPaperContent.length > this.current){
                this.$message({
                    message: '切换上一题',
                    type: 'success',
                })
                this.TestPaperContent[this.current].SHOW = true
                this.TestPaperContent[this.current].Currently = true
            }else{
                this.$message({
                    message: '暂无更多题目',
                    type: 'error',
                })
            }
        },
        Nextquestion() {
            if(this.TestPaperContent.length-1 > this.current){
                this.current += 1
                if(this.TestPaperContent[this.current].Currently){
                    this.current += 1
                }
                this.TestPaperContent.forEach((item,index) =>{
                    item.SHOW = false
                })
                this.$message({
                    message: '切换下一题',
                    type: 'success',
                })
                this.TestPaperContent[this.current].SHOW = true
                this.TestPaperContent[this.current].Currently = true
            }else{
                this.$message({
                    message: '暂无更多题目',
                    type: 'error',
                })
            }
        },
        examinationData(res) {
            this.$message({
                message: '请开始考试',
                type: "warning",
            });
            this.eid = res.data.e_id
            res.data.questions.forEach((item,index) =>{
                // item['User_Answer'] = '';
                item['disabled'] = false;
                item['answer'] = 0;
                item['SHOW'] = false;
                item['many'] = false;           // 多选题
                item['Choice'] = false;         // 单选题
                item['Currently'] = false;      // 是否回答过 
                item['user_answer'] = []
                item['tyopesize'] = ''
                if(item.q_type == ' 1'){
                    item.tyopesize = '多选题'
                    item.many = true
                    item.Choice = false
                }else if(item.q_type == ' 2'){
                    item.tyopesize = '判断题'
                    item.Choice = true
                    item.many = false
                }else if(item.q_type == ' 0'){
                    item.tyopesize = '单选题'
                    item.Choice = true
                    item.many = false
                }
                // item.answers.sort(() => Math.random() - 0.5);
                // numbers.filter(num => num > 2);
                // item.answers.forEach((val,_id) =>{
                //     if(val.a_item == "C.undefined" || val.a_item == "D.undefined"){
                //         item.answers.splice(_id,1)
                //     }
                // })
                
                if(item.q_type == 0 || item.q_type == 2){
                    item.answers = item.answers.filter(num => num.a_item != "C.undefined")
                    item.answers = item.answers.filter(num => num.a_item != "D.undefined")
                }
                if(item.q_type == 2){
                    let ABCS = []
                    ABCS.push( item.answers[0],item.answers[1] )
                    item.answers = ABCS
                }
            })
            res.data.questions[0]['SHOW'] = true
            res.data.questions[0]['Currently'] = true
            this.TestPaperContent = res.data.questions
        },
        updated(){
            let wrong_listData = {}
            this.TestPaperContent.forEach((item,index) =>{
                if(Array.isArray(item.user_answer)){

                }else{
                    item.user_answer = [item.user_answer]
                }
                wrong_listData[item.q_id] = item.user_answer
            })
            let param = {
                "uid": JSON.parse(sessionStorage.getItem('info')).u_id,
                "eid": this.eid,
                "question_list": wrong_listData
            }
            if(this.SHOW_bukao){
                this.post('re_exam/end',param).then(res=>{
                    if(res.code == 200){
                        this.SHOWASD = true
                        this.finish = false
                        setTimeout(() =>{
                            ElMessageBox.alert(`答题完毕,请查看成绩`, '考试结束!', {
                                confirmButtonText: 'OK',
                                callback: (action) => {
                                
                                },
                            })
                            this.chengji = res.data
                        },500)
                    }
                })
                this.exam_is_over = false
            }else{
                this.post('exam/end',param).then(res=>{
                    if(res.code == 200){
                        this.SHOWASD = true
                        this.finish = false
                        ElMessageBox.alert(`答题完毕,请查看成绩`, '考试结束!', {
                            confirmButtonText: 'OK',
                            callback: (action) => {
                            
                            },
                        })
                        this.chengji = res.data
                    }
                })
                this.exam_is_over = false
            }
        },
        Submitanswers(){
            ElMessageBox.confirm('你确定要提交试卷吗？','提交试卷', {
                confirmButtonText: '提交试卷',
                cancelButtonText: '取消',
                type: 'tijia',
                draggable: true,
            }).then(() => {
                setTimeout(() =>{
                    this.updated()
                },500)
            }).catch(() => {
            })
        },
        shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    //生命周期 - 创建之前 
    beforeCreate() {},
    //生命周期 - 挂载之前
    beforeMount() {},
    // 生命周期 - 更新之前 
    beforeUpdate() {},
    //生命周期 - 更新之后
    updated() {},
    //生命周期 - 销毁之前
    beforeDestroy() {},
    //生命周期 - 销毁完成
    destroyed() {},
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {
    },
}
</script>
<style>
.el-radio-group{
    display: block;
}
</style>
<style  scoped>
.finish{
    width:100%; 
    height: 100%; 
    position: fixed; 
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    background: rgba(0,0,0,0.4);
    border-radius: 0px 0px 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.Submitprompt{
    text-align: left;
    font-size: 19px;
    font-weight: 550;
    padding-left: 17%;
    margin-top: 3%;
}
.head_Submit{
    width: 29%;
    height: 26%;
    margin-bottom: 28px;
}
.head_content{
    width: 100%;
    height: 100%;
    background-image: url('../assets/Submitatest.png');
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tab_size{
    width: 300px;
    height: 63px;
    background: #2A5FD8;
    box-shadow: inset 0px -4px 0px 0px #409EFF;
    border-radius: 0px 0px 0px 0px;
    position: absolute;
    left: 40%;
    right: 40%;
    top: 0%;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nothingData div{
    background: #F7F8FA;
    border-radius: 12px 12px 12px 12px;
    padding: 30px;
}
.nothingData p{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 46px;
    line-height: 67px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    color: #5089F7;
}
.nothingData{
    width: 300px;
    background: #FFFFFF;
    box-shadow: 0px 4px 6px 0px rgba(43,174,255,0.1);
    border-radius: 32px 32px 32px 32px;
}
.Currently{
    width: 48px;
    height: 48px;
    background: #C4D9FC;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #5089F7;
    color: #FFF;
    font-size: 28px;
    text-align: center;
    background-color: #67C23A !important;
    margin: 0px 5px;
}
.CurrentlyTwo{
    width: 48px;
    height: 48px;
    background: #C4D9FC;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #5089F7;
    color: #FFF;
    font-size: 28px;
    text-align: center;
    margin: 0px 5px;
}
.right-top{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.el-radio{
    height: auto;
}
.head::-webkit-scrollbar {
  width: 0;
}
.head{
    width: 100%;
    height: 100%;
    box-shadow: var(--el-box-shadow-dark);
    overflow: auto;
}
</style>